<template>
  <el-table
    :data="cartData"
    style="width: 980px"
  >
    <el-table-column
      prop="name"
      label="项目"
      width="532"
    />
    <el-table-column
      prop="price"
      label="单价"
      width="132"
    />
    <el-table-column
      label="数量"
      width="212"
    >
      <template slot-scope="scope">
        <el-input-number v-model="scope.row.count" @change="handleChange" :min="0" />
      </template>
    </el-table-column>
    <el-table-column
      label="总价"
      width="180"
    >
      <template slot-scope="scope">
        <div class="">
          {{ scope.row.price * scope.row.count }}
        </div>
      </template>
    </el-table-column>
  </el-table>
</template>
<script>
export default {
  name: '',
  props: {
    cartData: {
      type: Array,
      default: () => []
    }
  },
  // data () {
  //   return {
  //     cartData: [{
  //       price: '169',
  //       name: '项目1',
  //       count: 1
  //     }, {
  //       price: '169',
  //       name: '项目2',
  //       count: 1
  //     }, {
  //       price: '169',
  //       name: '项目3',
  //       count: 1
  //     }, {
  //       price: '169',
  //       name: '项目4',
  //       count: 1
  //     }],
  //     num: 1
  //   }
  // },
  methods: {
    handleEdit (index, row) {
    },
    handleDelete (index, row) {
    },
    handleChange (value) { // 计数器

    }
  }
}
</script>
<style lang='scss'>
</style>
